<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>

    <meta name="viewport" content="width=device-width" />
    <title>ECharts 关系图谱</title>
    <script src="../ruoyi/js/jquery-ui-1.10.4.min.js"></script>
    <script src="../ruoyi/js/echarts.min.js"></script>
    <style type="text/css">
        html, body, #main { height: 100%; width: 100%; margin: 0; padding: 0 }
    </style>
	<th:block th:include="include :: header('表格搜索')" />
	<th:block th:include="include :: bootstrap-select-css" />
</head>
<body class="gray-bg">
    <div class="container-div">
		<div class="row">
			<div class="col-sm-12 search-collapse">
				<form id="ordinary-form">
					<div class="select-list">
						<ul>
							<li>
								公司名称查询：<input type="text" name="userId"/>
							</li>
							<li>
								问题查询：<input type="text" name="termId"/>
							</li>
							<li>
								<a class="btn btn-primary btn-rounded btn-sm" onclick="createEch()"><i class="fa fa-search"></i>&nbsp;搜索</a>
							    <a class="btn btn-warning btn-rounded btn-sm" onclick="getsj()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
							</li>
						</ul>
					</div>
				</form>
			</div>
   			 <div id="main" ></div>
		</div>
	</div>
			
			
    <script type="text/javascript">
    
    function getsj(){
    	var str = '[{"href":"baidu.com","text":"test","orgId":123,"dataType":"curry","activeClass":"haha"}]';
    	var obj = jQuery.parseJSON(str);
		alert(obj[0].href);
    	$.get("/company/echarts/list",function(data){
    		
    		alert(data.list);

    	});
    }
    
    function createEch(){
    	 var myChart = echarts.init(document.getElementById('main'));
         option = {

             series: [
                 {
                     type: 'graph',
                     layout: 'force',
                     symbolSize: 80,
                     roam: true,
                     edgeSymbol: ['circle', 'arrow'],
                     edgeSymbolSize: [4, 10],
                     edgeLabel: {
                         normal: {
                             textStyle: {
                                 fontSize: 20
                             }
                         }
                     },
                     force: {
                         repulsion: 2500,
                         edgeLength: [10, 50]
                     },
                     draggable: true,
                     itemStyle: {
                         normal: {
                             color: '#4b565b'
                         }
                     },
                     lineStyle: {
                         normal: {
                             width: 2,
                             color: '#4b565b'

                         }
                     },
                     edgeLabel: {
                         normal: {
                             show: true,
                             formatter: function (x) {
                                 return x.data.name;
                             }
                         }
                     },
                     label: {
                         normal: {
                             show: true,
                             textStyle: {
                             }
                         }
                     },
                     data: [
                         {
                             name: '中国船舶工业集团公司',
                             symbolSize: 150
                         }, {
                             name: '基本情况和取得的主要成效',
                                 symbolSize: 100
                         }, {
                             name: '效果1',
                             symbolSize: 100
                         }, {
                             name: '效果2',
                             symbolSize: 100
                         }, {
                             name: '效果3',
                             symbolSize: 100
                         }, {
                             name: '问题1',
                             symbolSize: 100
                         }, {
                             name: '问题2',
                             symbolSize: 100
                         }, {
                             name: '问题3',
                             symbolSize: 100
                         }, {
                             name: '问题4',
                             symbolSize: 100
                         }
                     ],
                     links: [
                         {
                             source: '中国船舶工业集团公司',
                             target: '基本情况和取得的主要成效',
                             name: ''
                         }, {
                             source: '基本情况和取得的主要成效',
                             target: '效果1',
                             name: ''
                         }, {
                             source: '中国船舶工业集团公司',
                             target: '效果2',
                             name: '审计发现的主要问题'
                         }, {
                             source: '中国船舶工业集团公司',
                             target: '效果3',
                             name: "基本情况和取得的主要成效"
                         }, {
                             source: '中国船舶工业集团公司',
                             target: '问题1',
                             name: "审计发现的主要问题"
                         }, {
                             source: '中国船舶工业集团公司',
                             target: '问题2',
                             name: "审计发现的主要问题"
                         }, {
                             source: '中国船舶工业集团公司',
                             target: '问题3',
                             name: "审计发现的主要问题"
                         }, {
                             source: '中国船舶工业集团公司',
                             target: '问题4',
                             name: ""
                         }
                        ]
                 }
             ]
         };
         myChart.setOption(option);
    }
       
    </script>


</body>
</html>
